<template>
  <div>
    <div class="cWwzy">
      <router-link to="Transfer">
        <van-nav-bar
          title="账号转账"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
      /></router-link>
      <div class="cPerson">
        <h1>收款人</h1>
        <!-- 输入任意文本 -->
        <van-field v-model="text" label="收款户名" placeholder="请输入名称" />
        <!-- 允许输入正整数，调起纯数字键盘 -->
        <van-field
          v-model="digit"
          type="digit"
          label="收款账号"
          placeholder="请输入账号"
        />
        <!-- 输入任意文本 -->
        <van-field v-model="text1" label="收款银行" placeholder="请输入银行" />
      </div>
      <div id="cBack"></div>
      <div class="cCard">
        <h2>付款卡</h2>
        <div id="cCard_section">
          <div id="cCard_section_left">
            <van-icon name="idcard" size="50px" />
            <div id="cCard_section_left_section">
              <div id="cCard_section_center">
                <span>卡号</span>
                <p>{{ this.acquire.data[0].hideCardNum }}</p>
              </div>
              <div id="cCard_section_center1">
                <span>余额</span>
                <p>{{ this.acquire.data[0].depositSum }}</p>
              </div>
            </div>
          </div>

          <div id="cCard_section_right">
            <van-icon name="arrow-down" size="30px" />
          </div>
        </div>
      </div>
      <div class="ccMoney">
        <p>转账金额</p>
        <p>转账说明</p>
      </div>
      <div id="cCmoney1">
        <img src="../assets/img/钱钱-01(1).png" alt="" />
        <van-cell-group>
          <van-field v-model="value11" placeholder="请输入金额" />
        </van-cell-group>
      </div>
      <p id="cCapital">大写金额</p>
      <div class="cPostscript">
        <van-field
          v-model="value1"
          label="转账赠言"
          right-icon="arrow-up"
          placeholder="请输入附言"
        />
        <div class="cPostscript_left"></div>
        <div class="cYan1">请输入附言</div>
        <div class="cPostscript-button">
          <button class="cSheng">生活费</button>
          <button class="cHuan">还信用卡</button>
          <button class="cGong">工资</button>
        </div>
      </div>
      <div class="cShishi">
        <div>预计实时到账</div>
        <div class="cTime">更换到账时间</div>
      </div>
      <div class="cAn">
        <button id="cNextStep" @click="show2">下一步</button>
        <van-popup
          v-model="show1"
          position="bottom"
          closeable
          type="text"
          :style="{ height: '50%' }"
        >
          <div class="ww-w1">
            <div class="cBar">
              <!-- <img class="cW" src="../assets/img/错误2.png" alt=""> -->
              <h4>确认信息</h4>
            </div>
            <div class="cUnit1">
              <p id="cFigure">{{ value11 }}</p>
              <span>转账金额(元)</span>
            </div>
            <div class="cPerson1">
              <div class="cW11">
                <div class="cW11-1">收款户名</div>
                <div class="cW11-2">{{ text }}</div>
              </div>
              <div class="cW22">
                <div class="cW22-1">收款账号</div>
                <div class="cW22-2">{{ digit }}</div>
              </div>
              <div class="cW33">
                <div class="cW33-1">收款银行</div>
                <div class="cW33-2">{{ text1 }}</div>
              </div>
              <div class="cAnn">
                <div class="cBan2" @click="(aa = true), (showa = true)">
                  下一步
                </div>
              </div>
              <!-- 密码 -->
              <!-- 密码框   弹出层-->

              <van-dialog
                v-model="showa"
                show-cancel-button
                style="height: 350px"
                @confirm="aaa"
              >
                <van-password-input
                  :value="value"
                  :focused="showKeyboard"
                  @focus="showKeyboard = true"
                />
                <!-- 数字键盘 -->
                <van-number-keyboard
                  v-model="value"
                  :show="showKeyboard"
                  @blur="showKeyboard = true"
                />
              </van-dialog>
            </div>
          </div>
        </van-popup>
      </div>

      <div class="cWenzi">
        <div>风险提示：</div>
        <div>
          1.请勿轻易向陌生人收款人转账，谨防电信网络诈骗。做到“陌生电话勿轻信，对方身份要核清，家中隐私勿泄露,涉及钱财需小心，遇到事情勿惊慌，即时拨打110”。
        </div>
        <div>
          2.为了您的资金安全，请务必妥善保管银行卡号，密码等个人重要信息。
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Notify } from "vant";
import { Account } from "../api/Accounts";
import { Accounts } from "../api/Accounts.js";
export default {
  components: {
    [Notify.Component.name]: Notify.Component,
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      value11: "",
      //收款人名字
      text: "",
      text1: "",
      digit: "",
      value1: "",
      vaule11: "",
      show1: false,
      show: false,
      aa: false,
      showKeyboard: true,
      showa: false,
      value: "",
      showKeyboard: true,
      passs: false,
      acquire: [],
    };
  },
  watch: {
    value(value) {
      if (value.length === 6 && value == "123123") {
        this.errorInfo = "输对了";
      } else if (value.length === 6 && value !== "123123") {
        this.errorInfo = "密码错误";
      }
    },
  },
  created() {
    this.fun();
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    showPopup() {
      this.show = true;
    },
    onInput(value) {
      Toast(value);
    },
    onDelete() {
      Toast("删除");
    },
    //渲染卡号和余额
    fun() {
      Account()
        .then((res) => {
          this.acquire = res.data;
          console.log(this.acquire);
          console.log(this.acquire.data[0].hideCardNum);
        })
        .catch((err) => {
          console.log(err);
          console.log(信息输入错误);
        });
    },
    aaa() {
      console.log(111);
      let cc = {
        //付款人银行卡号
        payment: this.acquire.data[0].hideCardNum,
        //密码
        pas: this.value,
        //收款人账号
        payeeName: this.text,
        //转账金额
        money: this.value11,
        //收款账号
        payee: this.digit,
        described: this.value1,
      };
      if (this.value11 == "") {
        Dialog({ title: "温馨提示", message: "金额不能为空，请重新输入" });
        return;
      }
      if (this.text == "") {
        Dialog({ title: "温馨提示", message: "名字不能为空，请重新输入" });
        return;
      }
      if (this.value1 == "") {
        Dialog({ title: "温馨提示", message: "赠言不能为空，请重新输入" });
        return;
      }
      Accounts(cc)
        .then((res) => {
          if (res.code == 200) {
            this.$router.push({
              name: "Operator",
            });
          } else {
            Dialog({ title: "温馨提示", message: res.msg });
            this.value = "";
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    show2() {
      if (this.digit == "") {
        Dialog({ title: "温馨提示", message: "银行卡不能为空，请重新输入" });
      } else {
        this.show1 = true;
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style src="../assets/css/Accounts1.css"></style>
